<!--
 * @Author: zhangmengqiong
 * @Date: 2021-04-30 17:33:59
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-10 16:59:44
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echartsDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js"></script>
    <!-- <script scr="./infographic2.js"></script> -->
    <style>
      #chart {
        margin-top: 200px;
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
      } else if (
        typeof exports === 'object' &&
        typeof exports.nodeName !== 'string'
      ) {
        // CommonJS
        factory(exports, require('echarts'));
      } else {
        // Browser globals
        factory({}, root.echarts);
      }
    })(this, function (exports, echarts) {
      var log = function (msg) {
        if (typeof console !== 'undefined') {
          console && console.error && console.error(msg);
        }
      };
      if (!echarts) {
        log('ECharts is not Loaded');
        return;
      }
      echarts.registerTheme('infographic', {
        color: [
          '#c1232b',
          '#27727b',
          '#fcce10',
          '#e87c25',
          '#b5c334',
          '#fe8463',
          '#9bca63',
          '#fad860',
          '#f3a43b',
          '#60c0dd',
          '#d7504b',
          '#c6e579',
          '#f4e001',
          '#f0805a',
          '#26c0c0',
        ],
        backgroundColor: 'rgba(0,0,0,0)',
        textStyle: {},
        title: {
          textStyle: {
            color: '#27727b',
          },
          subtextStyle: {
            color: '#aaaaaa',
          },
        },
        line: {
          itemStyle: {
            borderWidth: 1,
          },
          lineStyle: {
            width: '3',
          },
          symbolSize: '5',
          symbol: 'emptyCircle',
          smooth: false,
        },
        radar: {
          itemStyle: {
            borderWidth: 1,
          },
          lineStyle: {
            width: '3',
          },
          symbolSize: '5',
          symbol: 'emptyCircle',
          smooth: false,
        },
        bar: {
          itemStyle: {
            barBorderWidth: 0,
            barBorderColor: '#ccc',
          },
        },
        pie: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        scatter: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        boxplot: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        parallel: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        sankey: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        funnel: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        gauge: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
        },
        candlestick: {
          itemStyle: {
            color: '#c1232b',
            color0: '#b5c334',
            borderColor: '#c1232b',
            borderColor0: '#b5c334',
            borderWidth: 1,
          },
        },
        graph: {
          itemStyle: {
            borderWidth: 0,
            borderColor: '#ccc',
          },
          lineStyle: {
            width: 1,
            color: '#aaaaaa',
          },
          symbolSize: '5',
          symbol: 'emptyCircle',
          smooth: false,
          color: [
            '#c1232b',
            '#27727b',
            '#fcce10',
            '#e87c25',
            '#b5c334',
            '#fe8463',
            '#9bca63',
            '#fad860',
            '#f3a43b',
            '#60c0dd',
            '#d7504b',
            '#c6e579',
            '#f4e001',
            '#f0805a',
            '#26c0c0',
          ],
          label: {
            color: '#eeeeee',
          },
        },
        map: {
          itemStyle: {
            normal: {
              areaColor: '#dddddd',
              borderColor: '#eeeeee',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: '#fe994e',
              borderColor: '#444',
              borderWidth: 1,
            },
          },
          label: {
            normal: {
              textStyle: {
                color: '#c1232b',
              },
            },
            emphasis: {
              textStyle: {
                color: 'rgb(100,0,0)',
              },
            },
          },
        },
        geo: {
          itemStyle: {
            normal: {
              areaColor: '#dddddd',
              borderColor: '#eeeeee',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: '#fe994e',
              borderColor: '#444',
              borderWidth: 1,
            },
          },
          label: {
            normal: {
              textStyle: {
                color: '#c1232b',
              },
            },
            emphasis: {
              textStyle: {
                color: 'rgb(100,0,0)',
              },
            },
          },
        },
        categoryAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#27727b',
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#27727b',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#ccc'],
            },
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            },
          },
        },
        valueAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: '#333',
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#333',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ccc'],
            },
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            },
          },
        },
        logAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#27727b',
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#333',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ccc'],
            },
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            },
          },
        },
        timeAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#27727b',
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#333',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ccc'],
            },
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            },
          },
        },
        toolbox: {
          iconStyle: {
            normal: {
              borderColor: '#c1232b',
            },
            emphasis: {
              borderColor: '#e87c25',
            },
          },
        },
        legend: {
          textStyle: {
            color: '#333333',
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              color: '#27727b',
              width: 1,
            },
            crossStyle: {
              color: '#27727b',
              width: 1,
            },
          },
        },
        timeline: {
          lineStyle: {
            color: '#293c55',
            width: 1,
          },
          itemStyle: {
            normal: {
              color: '#27727b',
              borderWidth: 1,
            },
            emphasis: {
              color: '#72d4e0',
            },
          },
          controlStyle: {
            normal: {
              color: '#27727b',
              borderColor: '#27727b',
              borderWidth: 0.5,
            },
            emphasis: {
              color: '#27727b',
              borderColor: '#27727b',
              borderWidth: 0.5,
            },
          },
          checkpointStyle: {
            color: '#c1232b',
            borderColor: '#c23531',
          },
          label: {
            normal: {
              textStyle: {
                color: '#293c55',
              },
            },
            emphasis: {
              textStyle: {
                color: '#293c55',
              },
            },
          },
        },
        visualMap: {
          color: ['#c1232b', '#fcce10'],
        },
        dataZoom: {
          backgroundColor: 'rgba(0,0,0,0)',
          dataBackgroundColor: 'rgba(181,195,52,0.3)',
          fillerColor: 'rgba(181,195,52,0.2)',
          handleColor: '#27727b',
          handleSize: '100%',
          textStyle: {
            color: '#999999',
          },
        },
        markPoint: {
          label: {
            color: '#eeeeee',
          },
          emphasis: {
            label: {
              color: '#eeeeee',
            },
          },
        },
      });
    });
  </script>
  <script>
    const chartDemo = document.getElementById('chart');
    const chart = echarts.init(chartDemo, 'infographic', { renderer: 'svg' });
    chart.setOption({
      dataset: {
        // 提供一份数据。
        source: [
          ['product', 45, 80, '2015', 120],
          ['Matcha Latte', 43.3, 90, '2016', 110.7],
          ['Milk Tea', 83.1, 85, '2017', 55.1],
          ['Cheese Cocoa', 86.4, 100, '2018', 98.5],
          ['Walnut Brownie', 72.4, 97, '2019', 97.1],
        ],
      },
      title: {
        text: 'Echarts 多坐标系列案列',
      },
      xAxis: {
        data: [
          'product',
          'Matcha Latte',
          'Milk Tea',
          'Cheese Cocoa',
          'Walnut Brownie',
        ],
      },
      yAxis: {},
      series: [
        {
          type: 'pie',
          center: ['65%', 60],
          radius: 60,
          encode: { itemName: 3, value: 4 },
        },
        {
          type: 'bar',
          encode: { x: 0, y: 1 },
        },
        {
          type: 'line',
          encode: { x: 0, y: 2 },
        },
      ],
    });
  </script>
</html>
